<template>
  <div>
    订单管理
    <el-space direction="vertical">
      <el-card class="box-card" style="width: 800px">
        <el-button type="warning" @click="addNum">添加规格</el-button>
        <div v-for="o,index in num" :key="index" class="text item">
          <div class="input-but">
            <el-input
              v-model="num[index].title"
              placeholder="请输入规格"
              @blur="handleInputConfirm"
              style="width: 400px"
            />
            <span style="color:blue;cursor:pointer" @click="showInput">添加规格值</span>
          </div>
          <el-space>
            <el-input
              v-show="inputVisible"
              v-for="item,i in o.dynamicTags"
              :key="i"
              v-model="num[index].dynamicTags[i]"
              @blur="handleInputConfirm"
              placeholder="请输入规格"
              clearable
              style="width: 100px"
              @clear="cleaInput(item,i)"
            />
          </el-space>
          <el-input
            v-if="inputVisible"
            ref="InputRef"
            v-model="list.title"
            style="width: 100px"
            size="small"
            @keyup.enter="handleInputConfirm(index)"
            @blur="handleInputConfirm(index)"
          />
        </div>
      </el-card>
      <el-card class="box-card" style="width: 800px">
        <el-button class="button" type="warning" @click="newUpdate">刷新</el-button>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            v-for="item,index in tableData"
            :key="index"
            :prop="'id_'+item.title"
            :label="item.title"
            width="180"
          />
          <el-table-column prop="price" label="销售价" width="180">
            <template #default="scope">
              <el-input v-model="scope.row.price" placeholder="0" />
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-space>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //   num:1,
      num: [],
      tableData: [],
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      list: {
        title: "",
        dynamicTags: [],
        price: 0,
      },
    };
  },
  methods: {
    // 添加规格
    addNum() {
      this.num.push(this.list);
    },
    // 刷新
    newUpdate() {
      console.log(this.num, "数组111");
      let numList = this.num.map((item) => item.dynamicTags);
      console.log(numList, "数组3321");
      numList.reduce(
        (total, next) => {
          //   var array = [];
          total.forEach((item) => {
            next.forEach((item2) => {
              this.tableData.push(item.concat([item2]));
              console.log(array);
            });
          });
          return this.tableData1;
        },
        [[]]
      );
    },
    showInput() {
      this.inputVisible = true;
      nextTick(() => {
        this.$refs.InputRef.focus();
      });
    },
    // 删除标签
    cleaInput(item, i) {
      this.num[i].dynamicTags.splice(this.dynamicTags.indexOf(item), 1);
    },
    // 失去焦点
    handleInputConfirm(index) {
      this.inputVisible = true;
      if (this.inputValue) {
        this.num[index].dynamicTags.push(this.inputValue); //失去焦点后，如果input里面有值就把值赋给num数组
        // this.o.dynamicTags.push(this.inputValue);
      }
      this.list = this.$options.data().list; //清空input的值
      this.inputValue = "";
    },
  },
};
</script>
<style lang="less" scoped>
// body{
//     color: blue;
// }
.input-but {
  white-space: nowrap;
  margin-top: 10px;
}
.taglist {
  margin-top: 10px;
  margin-right: 10px;
}
</style>